import React from 'react';
import {PageContainer} from '@ant-design/pro-components';
import {CommentOutlined, CompassOutlined, QuestionCircleOutlined, SyncOutlined} from '@ant-design/icons';
import {ConfigProvider, FloatButton, theme, Button, Card, Flex, Typography, Space, Col, Row} from 'antd';


const cardStyle: React.CSSProperties = {
  width: 620,
};

const imgStyle: React.CSSProperties = {
  display: 'block',
  width: 353,
  height: 290,
  margin: '0 auto',
};

const style: React.CSSProperties = {background: '#0092ff', padding: '8px 20px', borderRadius: 8};

const NavFloatButton: React.FC = () => {
  const {Text, Link} = Typography;
  const floatButtonsGap = 44;
  return (
    <ConfigProvider theme={{
      // 1. 单独使用暗色算法
      algorithm: theme.darkAlgorithm,

      // 2. 组合使用暗色算法与紧凑算法
      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    }}>
      <PageContainer>
        <Card style={{borderRadius: 8,}}>
          <Space direction="vertical">
            <Row gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
              <Col className="gutter-row" span={24}>
                <Card style={{borderRadius: 8,}}>
                  <Row gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
                    {new Array(4).fill(null).map(function (item, index) {
                      console.info('1.item:', item, 'index:', index);
                      return <Col key={index} className="gutter-row" span={6}>
                        <div style={style}>col-6</div>
                      </Col>;
                    })}
                  </Row>
                </Card>
              </Col>
            </Row>
            <Row gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
              {new Array(6).fill(null).map(function (item, index) {
                console.info('2.item:', item, 'index:', index);
                return <Col key={index} className="gutter-row" span={4}>
                  <Card style={{borderRadius: 8,}}>
                    <Space direction="vertical">
                      <Text>Ant Design (default)</Text>
                      <Text type="secondary">Ant Design (secondary)</Text>
                      <Text type="success">Ant Design (success)</Text>
                      <Text type="warning">Ant Design (warning)</Text>
                      <Text type="danger">Ant Design (danger)</Text>
                      <Text disabled>Ant Design (disabled)</Text>
                      <Text mark>Ant Design (mark)</Text>
                      <Text code>Ant Design (code)</Text>
                      <Text keyboard>Ant Design (keyboard)</Text>
                      <Text underline>Ant Design (underline)</Text>
                      <Text delete>Ant Design (delete)</Text>
                      <Text strong>Ant Design (strong)</Text>
                      <Text italic>Ant Design (italic)</Text>
                      <Link href="https://ant.design" target="_blank">
                        Ant Design (Link)
                      </Link>
                    </Space>
                  </Card>
                </Col>;
              })}
            </Row>
            <Flex justify="space-between">
              {new Array(7).fill(null).map(function (item, index) {
                console.info('3.item:', item, 'index:', index);
                return <Card key={index} style={{borderRadius: 8,}}>
                  <Space direction="vertical">
                    <Text>Ant Design (default)</Text>
                    <Text type="secondary">Ant Design (secondary)</Text>
                    <Text type="success">Ant Design (success)</Text>
                    <Text type="warning">Ant Design (warning)</Text>
                    <Text type="danger">Ant Design (danger)</Text>
                    <Text disabled>Ant Design (disabled)</Text>
                    <Text mark>Ant Design (mark)</Text>
                    <Text code>Ant Design (code)</Text>
                    <Text keyboard>Ant Design (keyboard)</Text>
                    <Text underline>Ant Design (underline)</Text>
                    <Text delete>Ant Design (delete)</Text>
                    <Text strong>Ant Design (strong)</Text>
                    <Text italic>Ant Design (italic)</Text>
                    <Link href="https://ant.design" target="_blank">
                      Ant Design (Link)
                    </Link>
                  </Space>
                </Card>;
              })}
            </Flex>
            <Flex justify="space-between">
              {new Array(4).fill([1, 2, 3, 4]).map(function (item, index) {
                console.info('4.item:', item, 'index:', index, 'length:', item.length, 'item[index]:', item[index]);
                return <Card key={index} hoverable style={{borderRadius: 8,}}>
                  <Space direction="vertical">
                    <Text>Ant Design (default)</Text>
                    <Text type="secondary">Ant Design (secondary)</Text>
                    <Text type="success">Ant Design (success)</Text>
                    <Text type="warning">Ant Design (warning)</Text>
                    <Text type="danger">Ant Design (danger)</Text>
                    <Text disabled>Ant Design (disabled)</Text>
                    <Text mark>Ant Design (mark)</Text>
                    <Text code>Ant Design (code)</Text>
                    <Text keyboard>Ant Design (keyboard)</Text>
                    <Text underline>Ant Design (underline)</Text>
                    <Text delete>Ant Design (delete)</Text>
                    <Text strong>Ant Design (strong)</Text>
                    <Text italic>Ant Design (italic)</Text>
                    <Link href="https://ant.design" target="_blank">
                      Ant Design (Link)
                    </Link>
                  </Space>
                </Card>;
              })}
              <Card hoverable style={cardStyle} styles={{body: {padding: 0, overflow: 'hidden'}}}>
                <Flex justify="space-between" vertical={true}>
                  <img
                    alt="avatar"
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    style={imgStyle}
                  />
                  <Flex vertical align="flex-end" justify="space-between" style={{padding: 32}}>
                    <Typography.Title level={3}>
                      “antd is an enterprise-class UI design language and React UI library.”
                    </Typography.Title>
                    <Button type="primary" href="https://ant.design" target="_blank">
                      Get Started
                    </Button>
                  </Flex>
                </Flex>
              </Card>
            </Flex>
            {/*zch-site*/}
            <Flex justify="space-between">
              <Card style={{borderRadius: 8,}}>
                <Space direction="vertical">
                  <Text>1.Ant Design (default)</Text>
                  <Text type="secondary">Ant Design (secondary)</Text>
                  <Text type="success">Ant Design (success)</Text>
                  <Text type="warning">Ant Design (warning)</Text>
                  <Text type="danger">Ant Design (danger)</Text>
                  <Text disabled>Ant Design (disabled)</Text>
                  <Text mark>Ant Design (mark)</Text>
                  <Text code>Ant Design (code)</Text>
                  <Text keyboard>Ant Design (keyboard)</Text>
                  <Text underline>Ant Design (underline)</Text>
                  <Text delete>Ant Design (delete)</Text>
                  <Text strong>Ant Design (strong)</Text>
                  <Text italic>Ant Design (italic)</Text>
                  <Link href="https://ant.design" target="_blank">
                    14.Ant Design (Link)
                  </Link>
                </Space>
              </Card>
            </Flex>
          </Space>
        </Card>
      </PageContainer>
      {/*new group*/}
      <FloatButton.Group shape="circle">
        <FloatButton/>
        <FloatButton icon={<SyncOutlined/>}/>
        <FloatButton icon={<CommentOutlined/>}/>
        <FloatButton icon={<QuestionCircleOutlined/>}/>
        <FloatButton.BackTop visibilityHeight={0}/>
      </FloatButton.Group>
      {/**/}
      <FloatButton.Group shape="square" style={{right: 24 + floatButtonsGap}}>
        <FloatButton badge={{count: 123, overflowCount: 100}}/>
        <FloatButton badge={{count: 5}} icon={<SyncOutlined/>}/>
        <FloatButton icon={<CommentOutlined/>}  badge={{dot: true}}/>
        <FloatButton badge={{count: 123, color: 'green'}} icon={<QuestionCircleOutlined/>} href="https://ant.design/index-cn" tooltip={<div>ant.design</div>}/>
        <FloatButton.BackTop visibilityHeight={0}/>
      </FloatButton.Group>
      {/**/}
      <FloatButton.Group shape="square" style={{right: 24 + floatButtonsGap * 2}}>
        <FloatButton/>
        <FloatButton icon={<SyncOutlined/>}/>
        <FloatButton icon={<CommentOutlined/>}/>
        <FloatButton icon={<QuestionCircleOutlined/>}/>
        <FloatButton.BackTop visibilityHeight={0}/>
      </FloatButton.Group>
      {/* another group */}
      <FloatButton.Group trigger="click" type="primary" style={{right: 24 + floatButtonsGap * 3}} icon={<CompassOutlined/>}>
        <FloatButton/>
        <FloatButton icon={<SyncOutlined/>}/>
        <FloatButton icon={<CommentOutlined/>}/>
        <FloatButton icon={<QuestionCircleOutlined/>}/>
        <FloatButton.BackTop visibilityHeight={0}/>
      </FloatButton.Group>
      {/**/}
      <FloatButton.Group trigger="hover" type="primary" shape={"square"} style={{right: 24 + floatButtonsGap * 4}} icon={<CompassOutlined spin/>}>
        <FloatButton/>
        <FloatButton icon={<SyncOutlined/>}/>
        <FloatButton icon={<CommentOutlined/>}/>
        <FloatButton icon={<QuestionCircleOutlined/>}/>
        <FloatButton.BackTop visibilityHeight={0}/>
      </FloatButton.Group>
    </ConfigProvider>
  );
};

export default NavFloatButton;
